---
title: registerRootComponent
description: A universal component that allows setting the initial React component to render natively in the app's root React Native view.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-52/packages/expo/src/launch'
packageName: 'expo'
platforms: ['android', 'ios', 'tvos', 'web']
---

import { APIInstallSection } from '~/components/plugins/InstallSection';

Sets the initial React component to render natively in the app's root React Native view on Android, iOS, and the web. It also adds dev-only debugging tools for use with `npx expo start`.

## Installation

<APIInstallSection hideBareInstructions />

### Manual Android setup

> This is only required if your app does **not** use [Expo Prebuild](/workflow/prebuild) to continuously generate the **android** directory.

Update the **android/app/src/main/your-package/MainActivity.java** file to use the name `main` in the `getMainComponentName` function.

```diff
  @Override
  protected String getMainComponentName() {
+    return "main";
  }
```

### Manual iOS setup

> This is only required if your app does **not** use [Expo Prebuild](/workflow/prebuild) to continuously generate the **ios** directory.

Update the iOS **ios/your-name/AppDelegate.(m|mm|swift)** file to use the **moduleName** `main` in the `createRootViewWithBridge:bridge moduleName:@"main" initialProperties:initProps` line of the `application:didFinishLaunchingWithOptions:` function.

## API

```ts
import { registerRootComponent } from 'expo';
```

### `registerRootComponent(component)`

Sets the initial React component to render natively in your app's root React Native view (`RCTView`).

This function does the following:

- Invokes React Native's [AppRegistry.registerComponent](https://reactnative.dev/docs/appregistry.html)
- Invokes React Native web's `AppRegistry.runApplication` on web to render to the root `index.html` file.
- Polyfills the [`process.nextTick`](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#process-nexttick) function globally.
- Adds support for using the `fontFamily` React Native style with the `expo-font` package.

This function also adds the following dev-only features that are **removed** in production bundles.

- Adds the Fast Refresh and bundle splitting indicator to the app.
- Asserts if the `expo-updates` package is misconfigured.
- Asserts if `react-native` is not aliased to `react-native-web` when running in the browser.

#### Arguments

- **component (ReactComponent)**: The React component class that renders the rest of your app.

#### Returns

No return value.

## Common questions

### What if I want to name my main app file something other than App.js or app/\_layout.tsx?

**For projects that do not use [Expo Router](/router/introduction/)**, you can set the `"main"` in **package.json** to any file within your project. If you do this, then you need to use `registerRootComponent`. The `export default` will not make this component the root for the app if you are using a custom entry file.

For example, let's say you want to make **src/main.jsx** the entry file for your app &mdash; maybe you don't like having JavaScript files in the project root. First, set this in **package.json**:

```json package.json
{
  "main": "src/main.jsx"
}
```

Then, in **src/main.jsx**, make sure you call `registerRootComponent` and pass in the component you want to render at the root of the app:

```jsx src/main.jsx
import { registerRootComponent } from 'expo';
import { View } from 'react-native';

function App() {
  return <View />;
}

registerRootComponent(App);
```

**For projects that use [Expo Router](/router/introduction/)**, you can create a custom entry point by following these steps from [Expo Router's installation guide](/router/installation/#custom-entry-point-to-initialize-and-load). To use the top-level **src** directory in your Expo Router project, see [src directory reference](/router/reference/src-directory/) for more information.
